Skip to content

refactor: avoid layout thrashing on first dropdown render #10380

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 2 commits into from
Oct 27, 2025
Merged

refactor: avoid layout thrashing on first dropdown render #10380

merged 2 commits into from
Oct 27, 2025
+2 −2

Conversation

@vursen
Copy link
Contributor

@vursen vursen commented Oct 24, 2025 •
edited
Loading

Description

This PR improves the initial opening performance of the date picker by preventing layout thrashing when the infinite scroller initializes the date calendar pool.

Before After
Screenshot 2025-10-24 at 19 07 27 Screenshot 2025-10-24 at 19 08 18

Fixes vaadin/flow-components#8167

Type of change

  • Bugfix

@vursen vursen requested a review from web-padawan October 24, 2025 15:11
@vursen vursen marked this pull request as ready for review October 24, 2025 15:11
@vursen vursen removed the request for review from web-padawan October 24, 2025 15:12
@vursen vursen marked this pull request as draft October 24, 2025 15:12
@sonarqubecloud
Copy link

Quality Gate Passed Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

@vursen vursen changed the title refactor: avoid layout trashing when creating date calendars refactor: avoid serial layout thrashing when opening calendar dropdown Oct 26, 2025
@vursen vursen changed the title refactor: avoid serial layout thrashing when opening calendar dropdown refactor: avoid serial layout thrashing on first dropdown render Oct 26, 2025
vursen
vursen commented Oct 26, 2025
View reviewed changes
packages/date-picker/test/visual/lumo/screenshots/date-picker/baseline/ltr-dropdown.png
Copy link
Contributor Author

@vursen vursen Oct 26, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The new screenshots show the correct behavior. In the previous version, the dropdown initially opened with slightly misaligned months, which then realigned after reopening.

@vursen vursen marked this pull request as ready for review October 26, 2025 08:34
@vursen vursen requested a review from web-padawan October 26, 2025 08:34
@vursen vursen changed the title refactor: avoid serial layout thrashing on first dropdown render refactor: avoid layout thrashing on first dropdown render Oct 26, 2025
@web-padawan web-padawan merged commit 7065a37 into main Oct 27, 2025
9 checks passed
@web-padawan web-padawan deleted the optimize-date-picker-opening branch October 27, 2025 09:14
@vaadin-bot
Copy link
Collaborator

Hi @vursen and @web-padawan, when i performed cherry-pick to this commit to 24.9, i have encountered the following issue. Can you take a look and pick it manually?
Error Message:
Error: Command failed: git cherry-pick 7065a37
error: could not apply 7065a37... refactor: avoid layout thrashing on first dropdown render (#10380)
hint: After resolving the conflicts, mark them with
hint: "git add/rm ", then run
hint: "git cherry-pick --continue".
hint: You can instead skip this commit with "git cherry-pick --skip".
hint: To abort and get back to the state before "git cherry-pick",
hint: run "git cherry-pick --abort".

@vaadin-bot
Copy link
Collaborator

Hi @vursen and @web-padawan, when i performed cherry-pick to this commit to 24.8, i have encountered the following issue. Can you take a look and pick it manually?
Error Message:
Error: Command failed: git cherry-pick 7065a37
error: could not apply 7065a37... refactor: avoid layout thrashing on first dropdown render (#10380)
hint: After resolving the conflicts, mark them with
hint: "git add/rm ", then run
hint: "git cherry-pick --continue".
hint: You can instead skip this commit with "git cherry-pick --skip".
hint: To abort and get back to the state before "git cherry-pick",
hint: run "git cherry-pick --abort".

@vursen vursen mentioned this pull request Oct 27, 2025
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@web-padawan web-padawan web-padawan approved these changes

Assignees

No one assigned

Labels

need to pick manually 24.8 need to pick manually 24.9 target/24.8 target/24.9

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

DatePicker-Overlay opens very slow with large DOM [2 days]

4 participants

@vursen @vaadin-bot @web-padawan